<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>学的不仅是技术，更是梦想！</p>
    <p>学的不仅是技术，更是梦想！</p>
    <div style="width: 100px;height: 100px;border: 1px solid red;background-color: black;"></div>
    <ul>
        <li>Coffee</li>
        <li>Milk</li>
        <li>Soda</li>
     </ul>
    <script>
        var aa=0;
        var bb=0;
         (function(){
            var jquery=window.$=function(xzq){
                console.log("我的框架");
                return new jquery.prototype.init(xzq);
            }
            jquery.prototype={
                init:function(xzq){
                    let arr=document.querySelectorAll(xzq);
                    Array.prototype.push.apply(this,arr)
                    return this;
                },
                html:function(v){
                    if(v==undefined){
                        return this[0].innerHTML;
                    }
                    for(let i=0;i<this.length;i++){
                        this[i].innerHTML=v;
                    }
                },
                css:function(bgcolor,color){
                    if(color==undefined){
                        return this[0].style[bgcolor]
                    }
                    if(aa!=null){
                      this[aa].style[bgcolor]=color  
                   }
                    // for(let i=0;i<this.length;i++){
                    //     this[i].style[bgcolor]=color
                    // }
                   
                    return this;
                },
                eq:function(s){
                    console.log(s);
                    aa=s;
                   return this;
                },
                attr:function(wuu,value){
                    for(let i=0;i<this.length;i++){
                        this[i].style[wuu]=value;
                    }
                    return this;
                },
                each:function(func){
                    
                    for(let i=0;i<this.length;i++){
                        bb=i;
                        (func)();
                    }
                    return this;
                },
                text:function(){
                  return this[bb].innerHTML;
                }
            }
            jquery.extends=function(obj){
                for(let attr in obj){
                    this[attr]=obj[attr]
                }
            }
            jquery.prototype.init.prototype=jquery.prototype;
            
        })();
        $("p").eq(1).css("backgroundColor","red");
        $("div").attr("height","200px")
        $("li").each(function(){
           alert($("li").text())
          })
    </script>
</body>
</html>